<template>
    <div class="View">
        <div class="page-view">
            <!-- 左侧导航栏 -->
            <div class="left-content-menu">
                <div class="title">
                    {{ $t("message.environmentSetting.title") }}
                </div>
                <!-- 菜单 -->
                <div class="menu-list-view" v-for="element in menu_list" :key="element.title">
                    <div class="menu-title">
                        <h4>{{ element.title }}</h4>
                        <i class="iconfont"></i>
                    </div>
                    <div v-for="item in element.list" :key="item.name" @click="onEnterClick(item)" :class="activeStyle == item.path
                        ? 'menu-item-active menu-item'
                        : 'menu-item'
                        ">
                        <i class="iconfont">{{ item.icon }}</i>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <!-- 右侧内容-->
            <div class="right-content-view">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
    name: "ESetting",
    data() {
        return {
            menu_list: [
                {
                    title: this.$t("message.environmentSetting.list.title_1"),
                    list: [
                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_2"
                            ),
                            icon: "\ue890",
                            path: "/EnvironmentTbs",
                        },
                    ],
                },
                // {
                //     title: this.$t("message.environmentSetting.list.title_3"),
                //     list: [
                //         {
                //             name: this.$t(
                //                 "message.environmentSetting.list.title_4"
                //             ),
                //             icon: "\ue89e",
                //             path: "",
                //         },
                //         {
                //             name: this.$t(
                //                 "message.environmentSetting.list.title_5"
                //             ),
                //             icon: "\ue892",
                //             path: "",
                //         },
                //     ],
                // },
                {
                    title: this.$t("message.environmentSetting.list.title_11"),
                    list: [

                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_12"
                            ),
                            icon: "\ue897",
                            path: "/Term",
                        },
                        {
                            name: this.$t(
                                "ラベル編集"
                            ),
                            icon: "\ue89c",
                            path: "/Editer",
                        },
                        {
                            name: "単位系登録",
                            icon: "\ue89b",
                            path: "/Unit",
                        },
                        // {
                        //     name: 'PFD関連付け',
                        //     icon: "\ue8e6",
                        //     path: "/editRelation",
                        //     isNewPage: true,
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_15"
                        //     ),
                        //     icon: "\ue89b",
                        //     path: "",
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_16"
                        //     ),
                        //     icon: "\ue8a5",
                        //     path: "",
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_17"
                        //     ),
                        //     icon: "\ue89f",
                        //     path: "",
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_18"
                        //     ),
                        //     icon: "\ue899",
                        //     path: "",
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_19"
                        //     ),
                        //     icon: "\ue8a0",
                        //     path: "",
                        // },
                    ],
                },
                {
                    title: this.$t("message.environmentSetting.list.title_6"),
                    list: [
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_7"
                        //     ),
                        //     icon: "\ue8aa",
                        //     path: "",
                        // },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_8"
                        //     ),
                        //     icon: "\ue8ab",
                        //     path: "",
                        // },
                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_9"
                            ),
                            icon: "\ue895",
                            path: "/Ledger",
                        },
                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_10"
                            ),
                            icon: "\ue896",
                            path: "/Temperature",
                        },
                    ],
                },

                {
                    title: this.$t("message.environmentSetting.list.title_20"),
                    list: [
                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_21"
                            ),
                            icon: "\ue8a1",
                            path: "Calc",
                        },
                        {
                            name: this.$t(
                                "message.environmentSetting.list.title_22"
                            ),
                            icon: "\ue8a2",
                            path: "MAT",
                        },
                        // {
                        //     name: this.$t(
                        //         "message.environmentSetting.list.title_23"
                        //     ),
                        //     icon: "\ue8a3",
                        //     path: "",
                        // },
                    ],
                },
            ],
            activeStyle: "/EnvironmentTbs",
        };
    },
    components: {},
    watch: {},
    methods: {
        onEnterClick(item) {
            if (item.isNewPage) {
                let routeData = this.$router.resolve({
                    path: item.path,
                });
                window.open(routeData.href, "_blank");
            } else {
                this.activeStyle = item.path;
                this.$router.push(item.path);
            }
        },
    },
    created() { },
    mounted() {
        // const that = this;
        this.$nextTick(function () {
            if ($(".LeftMenu").width() == 64) {
                $(".View").width($(".Content").width() - 64);
            } else if ($(".LeftMenu").width() == 192) {
                $(".View").width($(".Content").width() - 192);
            }
        });
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style  lang="scss" scoped>
.View {
    width: calc(100% - 192px);
    height: 100%;

    .page-view {
        position: relative;
        height: 100%;
        margin: 16px 0 0 0;
        border-radius: 2px;
        padding: 0 24px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

.left-content-menu {
    width: 257px;
    height: 100%;

    // overflow-y: auto;
    .title {
        width: 100%;
        height: 22px;
        line-height: 22px;
        font-weight: bold;
        text-align: center;
        color: #213d49;
        font-size: 16px;
        margin-bottom: 9px;
    }

    .menu-list-view {
        width: 100%;

        .menu-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: #f4f5f6;
            height: 24px;
            border-top: 1px solid #d8d8d8;
            border-bottom: 1px solid #d8d8d8;

            h4 {
                font-weight: bold;
                color: #213d49;
            }

            .el-icon-arrow-down {
                cursor: pointer;
            }
        }

        .menu-item {
            transition: 0.5s;
            padding: 0 16px;
            height: 36px;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            span {
                display: block;
                margin-left: 8px;
            }
        }

        .menu-item:hover {
            background: #fff1f0;
        }

        .menu-item-active {
            background: #fff1f0;
        }
    }
}

.right-content-view {
    width: calc(100% - 257px);
    height: 100%;
    position: relative;
}
</style>
